<template>
  <div class="item_data_tag_wrap">
    <div
      class="item_data_tag"
      @click="checkedTag(item)"
      :class="{ _checked: item.checked, _disabled: item.disabled }"
      v-for="(item, index) in list"
      :key="item.id"
    >
      <div class="header">
        <div class="title">
   
          <template v-if="item.items.length == 0">
            {{ item.name }}
          </template>
          <template v-else>
            <!-- width="fit-content"  -->
            <el-popover   popper-class="keys_popover" width="240" placement="top-start" trigger="hover">
              <template #reference>
                {{ item.name }}
              </template>
              <div class="keys_view">
                 <div style="padding:2px 0px;">{{msg.hasKey}}</div>
                <el-scrollbar  >
                  <div class="item_key" v-for="(itemKey, index) in item.items">{{ itemKey.name }}</div>
                </el-scrollbar>
              </div>
            </el-popover>
          </template>
        </div>
        <div class="operation">
          <el-checkbox v-model="item.checked" @change="tagChange(item)" :disabled="item.disabled" label="" size="large" />
        </div>
      </div>
      <div class="body">
        <span class="desc">{{ item.desc }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts' name=' '>
import { ref, reactive, getCurrentInstance, defineProps, defineEmits } from "vue";
import { Itags } from "./interface.ts";
const { proxy } = getCurrentInstance();
/**
 * 定义组件的props和emits。
 * 使用withDefaults为props提供默认值。
 * list默认为空数组，用于存储tag元素数据。
 */
const props = withDefaults(defineProps<{ list: Itags[],msg:Object }>(), {
  list: () => [],
  msg:()=>{}

});

/**
 * 定义组件的emits，用于外部监听tag的变化。
 */
const $emit = defineEmits(["tagChange"]);

/**
 * 切换标签的选中状态并触发tagChange事件。
 * @param {Object} item - 标签对象。
 * 如果标签为禁用状态，则不进行任何操作。
 */
const checkedTag = item => {
  if (item.disabled) {
    return;
  }
  item.checked = !item.checked;
  $emit("tagChange", JSON.stringify(item));
};

/**
 * 触发tagChange事件，将标签对象转换为字符串后传递。
 * @param {Object} item - 标签对象。
 */
const tagChange = item => {
  $emit("tagChange", JSON.stringify(item));
};
</script>
<style lang='scss' scoped>
.item_data_tag_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  .item_data_tag {
    min-height: 76px;
    padding: 10px;
    border-radius: 2px;
    border: 1px dashed #e6e6ee;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 13px;
      .title {
        font-size: 14px;
        font-weight: 400;
        color: #303133;
      }
      .operation {
        position: relative;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 0px;
          top: 0px;
          height: 100%;
          width: 100%;
          z-index: 100;
        }
      }
    }
    .body {
      .desc {
        font-size: 12px;
        color: #82848f;
      }
    }
    &._checked {
      background: #f8f9fa;
    }
    &:hover {
      cursor: pointer;
    }
    &._disabled {
      cursor: unset;
    }
  }
}
 .el-popover.keys_popover {
  // max-width: 50%;
  width: auto !important;
  padding-top: 0px!important;
}
.keys_view {
  display: flex;
  flex-direction: column;
  height: 150px;
  text-align: left;
  white-space: nowrap;
  margin-top: -10px;


  .item_key {
    padding: 4px 8px;
  }
}
</style>
